<template>
<!--echarts地球-->
    <div class="home-container">
        <div id="container">
            <div class="content">
                <p>我是首页</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import {onMounted} from "vue";

onMounted(()=>{
    setTimeout(()=>{
        initEcharts();
    },100)
})


const initEcharts = ()=>{
    const chartDom = document.getElementById('container');
    const myChart = echarts.init(chartDom);
    let option;

    option = {
        backgroundColor: '#000',
        globe: {
            baseTexture: 'src/assets/img/earth.jpg',
            shading: 'lambert',
            environment: "src/assets/img/starfield.jpg",
            atmosphere: {
                show: true
            },
            light: {
                ambient: {
                    intensity: 0.2
                },
                main: {
                    intensity: 1.5
                }
            }
        },
        series: []
    };
    option && myChart.setOption(option);
}


</script>

<style scoped lang="less">
@import "../../../assets/css/common.less";
.home-container{
  //background: @EleColor;
  width: 100%;
  height: 100%;
  overflow: hidden;
  //background-image: url("../../assets/img/gaoda.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#container{
  width: 100%;
  height: 100%;
  z-index: -1;
  .content{
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  div{
    width: 100%;
    height: 100%;
  }
}

.home-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>